<!DOCTYPE html>
<html>

<head>
    <title></title>
    <meta charset="utf-8">
    <style type="text/css">
        body { margin: 0;}
		#map { position: absolute; height: 100%; right: 0; left: 0; }
		.menuBar { position: relative; top: 10px; margin: 0 50px; padding: 5px; border-radius: 3px; z-index: 999; background-color: rgba(0, 168, 0, 0.7); }
		input[type=button] { font-size: 16px; }
    </style>

    <!-- 引入leafletapi -->
    <link rel="stylesheet" href="../lib/leaflet/leaflet.css" />
    <script src="../lib/leaflet/leaflet.js"></script>
    
    <!-- 引入互联网地图插件 -->
    <script src="../lib/leaflet/plugins/leaflet.ChineseTmsProviders.js"></script>

    <!-- 
        互联网地图纠偏插件
        需配合 leaflet.ChineseTmsProviders.js 插件使用
        无需js代码，引用后自动纠偏
        纠偏后的坐标为WGS84
    -->
    <script type="text/javascript" src='../lib//leaflet/plugins/leaflet.mapCorrection.min.js'></script>

    <script src='../lib//leaflet/plugins/turf.min.js'></script>
    <script src="../lib/jquery.min.js"></script>

</head>

<body>
    <div id='map'></div>
	<div class="menuBar">
		<input type="button" value="turf-buffer（欧式方法）" onclick="turfBuffer()" />
		<input type="button" value="postGIS缓冲（测地线方法）" onclick="postGISBuffer(1)" />
		<input type="button" value="postGIS缓冲（欧式方法）" onclick="postGISBuffer(2)" />
		<!-- <input type="button" value="arcGIS缓冲（测地线方法）" onclick="arcgisServerBuffer(1)" />
		<input type="button" value="arcGIS缓冲（欧式方法）" onclick="arcgisServerBuffer(2)" /> -->
	</div>
</body>

<script type="text/javascript">

    var map = L.map('map', {
            center: [39.905530, 116.391305],
            zoom: 17
        });

    //添加底图
    L.tileLayer.chinaProvider('GaoDe.Normal.Map').addTo(map);
    //设置中心点
    var marker = L.marker([39.905530,116.391305]).addTo(map).bindPopup('<p>天安门广场国旗所在位置</p>').openPopup();

    //turf 缓冲
    function turfBuffer(){
        //turf缓冲
        var buffered = turf.buffer(marker.toGeoJSON(), 500, {units: 'meters'});
        L.GeoJSON.geometryToLayer(buffered).addTo(map);
    }

    //postGIS 缓冲
    function postGISBuffer(bufferType){
        var markerGeojson = marker.toGeoJSON();
        var jsonObj = {
                geojson:markerGeojson.geometry,
                buffer:(500),
                type:bufferType
        };
        var jsonStr = JSON.stringify(jsonObj);
        
        //给接口地址仅用于测试
        var url = "http://gisarmory.xyz/gisarmory/backend/geometry/buffer_geojson";

        callAjax('post', 'json', url, jsonStr, "图形缓冲,geojson格式，buffer_geojson", function (result){
            if(result.resCode == 0){
                alert("调用后台接口出错")
                return;
            }
            var resObj = result.data[0];

            //把缓冲的结果显示在地图上
            L.GeoJSON.geometryToLayer(JSON.parse(resObj.buffer)).addTo(map);
        });
    }
    
    //arcgis server缓冲
    function arcgisServerBuffer(bufferType){

        var latlng = marker.getLatLng();

        var isGeodesic = false;
        if(bufferType == 1){
            isGeodesic = true;
        }
        
        var paramObj = {
            geometries:latlng.lng+','+ latlng.lat,				//要缓冲的图形
            distances:500,
            unit:9001,      //9001是米
            inSR:4326,
            bufferSR:3857,
            outSR:4326,
            unionResults:false,     //是否合并缓冲结果
            geodesic:isGeodesic,         //是否使用测地线方法
            f:'json'
        }

        //arcgis服务buffer服务地址，需要替换成自己的
        var url = "http://127.0.0.1:6080/arcgis/rest/services/Utilities/Geometry/GeometryServer/buffer";

        callAjax('get', 'jsonp', url, paramObj, "图形缓冲,geojson格式，buffer_geojson", function (result){
			for(var i=0; i<result.geometries.length; i++){
				var geoObj = result.geometries[i];

                var latlngs = [];
                for(var n=0; n<geoObj.rings[0].length; n++){
                    var xy = geoObj.rings[0][n];
                    latlngs.push([xy[1],xy[0]]);
                }

                L.polygon(latlngs, {color: 'red'}).addTo(map);
            }


        })
    }


    
    //调用后台接口
    function callAjax(type, dataType, url, paramObj, log, callback){
        $.ajax({
            type: type,
            url: url,
            data: paramObj,
            contentType:'application/json',
            dataType: dataType,
            success: function(result) {
                console.log(log);
                console.log(result);
                if(callback){
                    callback(result);
                }
                },
            error:function(e){
                console.log(e);
            }
        });
    }

    
</script>

</html>